<!--data.exam_code = route.params.exam_code;-->
<!--data.card_id = route.params.card_id;-->
<!--const {source, subjects, leads} = comm_chapter('createdTestPaperMockTest',{testPaperID:Number(data.id),documentsCode:data.card_id,RegistrationNumber:data.exam_code})-->
<template>
  <div class="chapterExercise">
    <Header></Header>
    <div class="main">
      <div class="banner">
        <img v-if="mode != 'analysis'" style="width: 100%"
             src="https://img.js.design/assets/img/617766b867e5da8dd2a409b5.png" alt="">
        <div class="question_result_header" v-else>
          <div class="center-model">
            <div style="display: flex">
              <div class="left-img">
                <img src="https://img.js.design/assets/smartFill/img328164da748e08.jpeg" alt="">
              </div>
              <div class="right-message">
                <p>{{ exam_name }}</p>
                <p>姓 名： {{ name }}</p>
                <p>性 别： {{ ['未知', '女', '男'][Number(sex)] }}</p>
                <p>准考证号: {{ exam_code }}</p>
                <p>证件号：{{ card_id }}</p>
              </div>
            </div>
            <div>
              <div class="demo-progress">
                <div class="item">
                  <el-progress type="circle" :stroke-linecap="'square'" :stroke-width="6" :width="126" :percentage="80">
                    <template #default="{ percentage }">
                      <span class="percentage-value">{{ useTime ? proxy.$filters.timeFormat(useTime) : null }}</span>
                      <span class="percentage-label">做题时长</span>
                    </template>
                  </el-progress>
                </div>
                <div class="item">
                  <el-progress type="circle" :stroke-width="6" :width="126" :percentage="80">
                    <template #default="{ percentage }">
                      <span class="percentage-value">{{ score }}</span>
                      <span class="percentage-label">客观题得分</span>
                    </template>
                  </el-progress>
                </div>
                <div class="item">
                  <el-progress type="circle" :stroke-width="6" :width="126" :percentage="80">
                    <template #default="{ percentage }">
                      <span class="percentage-value">{{ objectiveScore }}</span>
                      <span class="percentage-label">客观题总分</span>
                    </template>
                  </el-progress>
                </div>
              </div>
              <div class="hint">
                *自动判分只能判断客观题，主观题不计得分/总分
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="breadcrumb">
        <el-breadcrumb :separator-icon="'ArrowRightBold'">
          <el-breadcrumb-item class="link" @click="toIndex">首页</el-breadcrumb-item>
          <el-breadcrumb-item class="link" @click="toQuestionBack">我的题库</el-breadcrumb-item>
          <el-breadcrumb-item class="link" @click="toBack">{{ subject_name }}</el-breadcrumb-item>
          <el-breadcrumb-item>模拟考试</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div style="align-items: center" v-if="subjects">
        <el-row :gutter="20" style="margin-right: 0">
          <el-col :span="17">
            <el-card class="box-card">
              <template #header>
                <el-row>
                  <el-col :span="6" style="display: flex;align-items: center">
                                        <span v-if="active_subject.parent_id">
                                            第{{ active_subject.parent_sort }}-{{ active_subject.sort }}题，{{ active_subject.type_name }}
                                        </span>
                    <span v-else>
                                            第{{ active_subject.sort }}题，{{ active_subject.type_name }}
                                        </span>
                    <!--                                        <span>{{`第${active_idx+1}题，${active_subject.type_name}`}}</span>-->
                  </el-col>
                  <el-col :span="18">
                    <div class="card-header">
                      <div>
                        <!--                                                <timeDown v-if="mode == 'exam'" ref="timeDown" :timer="scopeTime - (source.useTime ? source.useTime : 0)"></timeDown>-->
                        <!--                                                {{scopeTime}} &#45;&#45; {{source.useTime}}-->
                        <CountDown v-if="mode == 'exam'" :time="Number((scopeTime - source.useTime )|| (scopeTime - 0))"
                                   @finish="onFinish"
                                   @change="onChange"
                                   :auto-start="true"
                                   ref="count_down">
                          <!--                                                    插槽：currentTime 和formatTime 是插槽prop的解包-->
                          <template v-slot="{currentTime,formatTime,formatFunc}">
                            <el-tag>
                              <div style="display: flex;align-items: center">
                                <img src="@/assets/tiku/time.png"/>&nbsp;
                                <span>{{ formatFunc(currentTime), format_str = '%h:%m:%s' }}</span>
                              </div>
                            </el-tag>
                            <!--                                                                {{proxy.$filters.timeFormat((source.useTime) - currentTime)}}-->
                          </template>

                        </CountDown>
                      </div>
                      <div style="display: flex;align-items: center">
                        <el-button-group>
                          <el-button :type="active_subject.flag?'primary':''"
                                     size="small"
                                     @click="active_subject.flag=!active_subject.flag">
                            <el-icon>
                              <Flag/>
                            </el-icon>
                            &nbsp;{{ active_subject.flag ? ' 取消' : '标记' }}
                          </el-button>
                          <el-button @click="addLike(active_subject.topic_id)" size="small"
                                     :type="active_subject.is_collect?'primary':''">
                            <el-icon>
                              <StarFilled/>
                            </el-icon>&nbsp;收藏
                          </el-button>
                        </el-button-group>
                      </div>
                    </div>
                  </el-col>
                </el-row>

              </template>
              <el-button style="margin-right: 15px;margin-bottom: 15px" size="small"
                         v-if="active_subject && active_subject.parent_id" type="primary"
                         @click="isCase = !isCase">查看题目背景
              </el-button>
              <Question
                  :subject="active_subject"
                  v-model:user_answer="active_subject.user_answer"
                  :mode="mode"
                  @checked="checked">
              </Question>
              <img class="question-icon" src="../../../assets/tiku/mnks-icon.png" alt="">
            </el-card>
            <div style="margin-top: 30px">
              <el-button-group>
                <el-button type="primary" @click="pre" :disabled="active_idx<=0">
                  {{ '< 上一题' }}
                </el-button>
                <el-button type="primary" @click="next" :disabled="active_idx>=subjects.length-1">
                  {{ '下一题 >' }}
                </el-button>
              </el-button-group>
            </div>
            <!--                        <div v-html="leads[active_subject.parent_id]"></div>-->
          </el-col>
          <el-col :span="7">
            <div class="grid-content bg-purple-dark"/>
            <div v-if="mode == 'analysis'" class="question_result">
              <div class="exam_quesion_score">
                <div class="table-body">
                  <table class="table_result">
                    <tr>
                      <th>题型</th>
                      <th>总分（分）</th>
                      <th>得分（分）</th>
                    </tr>
                    <tr v-if="single && single.typeCode != 9">
                      <td>{{ question_types.filter(item => item.code == String(single['typeCode']))[0].value }}</td>
                      <td>{{ single && single.totalScore ? single.totalScore : 0 }}</td>
                      <td>{{ single && single.score ? single.score : 0 }}</td>
                    </tr>
                    <tr v-if="multiterm && multiterm.typeCode != 9">
                      <td>{{ question_types.filter(item => item.code == String(multiterm['typeCode']))[0].value }}</td>
                      <td>{{ multiterm && multiterm.totalScore ? multiterm.totalScore : 0 }}</td>
                      <td>{{ multiterm && multiterm.score ? multiterm.score : 0 }}</td>
                    </tr>
                    <tr v-if="synthesize && synthesize.typeCode != 9">
                      <td>{{ question_types.filter(item => item.code == String(synthesize['typeCode']))[0].value }}</td>
                      <td>{{ synthesize && synthesize.totalScore ? synthesize.totalScore : 0 }}</td>
                      <td>{{ synthesize && synthesize.score ? synthesize.score : 0 }}</td>
                    </tr>
                  </table>

                </div>
              </div>
            </div>
            <div v-else>
              <div class="button-group">
                <div style="display: flex">
                  <el-button size="small" plain type="primary" :icon="'Tickets'" style="margin-right: 16px"
                             @click.stop="tableOfRates = !tableOfRates">税率表
                  </el-button>
                  <el-button size="small" plain type="primary" :icon="'Search'" @click="showCalculator">计算器
                  </el-button>
                </div>
              </div>
              <div class="person-message">
                <div class="title">
                  模拟考试答题卡
                </div>
                <div class="message">
                  <div class="left-img">
                    <img src="https://img.js.design/assets/smartFill/img328164da748e08.jpeg" alt="">
                  </div>
                  <div class="right-message">
                    <p>姓 名： {{ name }}</p>
                    <p>性 别： {{ ['未知', '女', '男'][Number(sex)] }}</p>
                    <p>准考证号: {{ exam_code }}</p>
                    <p>证件号：{{ card_id }}</p>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <Picker
                  :pick_flag="pick_flag"
                  :subjects="subjects"
                  v-model:index="active_idx"
                  :height="'300'"
                  :mode="mode">
              </Picker>
              <!--                            {{mode}}-->
            </div>
            <div>
              <el-button v-if="mode == 'exam'" type="primary" @click="submitAnswerFun" class="submit-button">
                交卷并查看结果
              </el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-empty v-else style="height:560px;" :image-size="200" description="暂无数据"/>
    </div>
<!--    <el-drawer size="50%" v-model="tableOfRates">-->
<!--      <template #header>-->
<!--        税率表-->
<!--      </template>-->
<!--      <div>-->
<!--        <img style="width: 100%" :src="imgUrl" alt="">-->
<!--      </div>-->
<!--    </el-drawer>-->
    <TableOfRates v-model="tableOfRates" :img-url="imgUrl"></TableOfRates>
    <div v-if="active_subject && active_subject.parent_id">
      <Case v-show="isCase" @anliClose="anliClose" :isShowCase="active_subject && active_subject.parent_id ? true:false"
            :caseContent="active_subject && active_subject.parent_id ? leads[active_subject.parent_id] :''"></Case>
    </div>
    <Dialog :dialogVisible="dialogVisible" @dialogEnd="dialogEnd"></Dialog>
    <div class="parent" v-if="isCalculator">
      <Vue3DraggableResizable
          :initW="280"
          :minW="220"
          :handles="['tl','tr']"
          :draggable="true"
          :resizable="true"
      >
        <Calculator @closeCalcuator="closeCalcuator"></Calculator>
      </Vue3DraggableResizable>
    </div>
    <staticFooter></staticFooter>
  </div>
</template>

<script>
import TableOfRates from "@/components/TableOfRates";
import Dialog from '@/components/dialog/index'
import CountDown from "@/components/timeDown/CountDown"
import Case from "../../../components/Case";
import staticFooter from "../../../components/staticFooter";
import Calculator from "../../../components/calculator/Calculator";
import timeDown from '../../../components/timeDown/index'
import {submit_result, submitAnswer} from "../../../hock/submit_question/submit_questions";
import SubmitAnswerSheet from "../../../components/submitAnswerSheet/SubmitAnswerSheet";
import goBackHistory from "../../../utils/hook/goBackHistory";
import Question from "../../../components/Question/Question";
import Picker from "../../../components/Picker/Picker";
import comm_chapter from "../../../hock/composables/comm_chapter";

import {Flag} from '@element-plus/icons-vue'
import {ref, watch} from 'vue'
import Header from "../../../components/Header";
import {useRoute, useRouter} from "vue-router";
import {reactive, toRefs, onBeforeUnmount, getCurrentInstance} from 'vue'
import {taxRateTable, testPaperDetailLog} from "../../../api/api";
import source_to_subjects from "../../../hock/public/source_to_subjects";
import {ElMessage, ElMessageBox} from "element-plus";
import {meCollect} from "../../../utils/hook/addLike/meCollect";

export default {
  name: "index",
  setup() {
    let route = useRoute();
    let router = useRouter();
    const {proxy} = getCurrentInstance()
    const timeDown = ref(null);
    let data = reactive({
      x: 100,
      y: 100,
      h: 100,
      w: 100,
      active: false,
      id: null,
      method: null,
      subject_name: '',
      ques_list: [],
      mode: 'exam',
      isCalculator: false,
      single: null,//单项
      multiterm: null,//多项
      synthesize: null,//综合
      useTime: null,//做题时长
      objectiveScore: null,//客观题总分
      score: null, //客观题得分
      isCase: false,
      tableOfRates: false,
      scopeTime: 0,
      exam_name: '',
      name: '',
      sex: '',
      pick_flag: false,
      dialogVisible: false,
      question_types: [{code: '1', value: '单项选择题'}, {code: '2', value: '多项选择题'}, {
        code: '3',
        value: '不定项选择题'
      }, {code: '4', value: '判断题'}, {code: '5', value: '填空题'}, {code: '6', value: '简答题'}, {
        code: '7',
        value: '论述题'
      }, {code: '8', value: '案例题'}, {code: '9', value: '综合题'}, {code: '10', value: '平台操作题'}]
    })
    data.name = localStorage.getItem('name');
    data.sex = localStorage.getItem('sex');
    data.scopeTime = route.params.scopeTime;
    data.id = route.params.id;
    data.method = route.params.method;
    data.exam_name = route.params.exam_name;
    data.subject_name = route.params.subject_name;
    data.exam_code = route.params.exam_code ? route.params.exam_code : null;
    data.card_id = route.params.card_id ? route.params.card_id : null;
    let fraction = route.params.fraction
    data.mode = fraction == 'null' ? 'exam' : 'analysis'
    const active_idx = ref(0)
    const active_subject = ref(null)
    const {
      source,
      subjects,
      leads
    } = comm_chapter(data.method, data.method == 'testPaperLogList' ? {testPaperID: Number(data.id)} : {
      testPaperID: Number(data.id),
      documentsCode: data.card_id,
      RegistrationNumber: data.exam_code
    })
    if (data.method == 'testPaperDetailLog' && fraction != 'null') {
      data.pick_flag = true
      testPaperDetailLog({
        testPaperID: Number(data.id),
        documentsCode: data.card_id,
        RegistrationNumber: data.exam_code
      }).then(res => {
        console.log('模拟考试列表详情', res);
        data.useTime = res.data.useTime;
        data.score = fraction;
        data.objectiveScore = res.data.objectiveScore;
        getScore(res.data.fractionClassify);
      })
    }

    const closeCalcuator = (param) =>{
      data.isCalculator = param;
    }

    let anliClose = () => {
      data.isCase = false
    }

    let dialogEnd = (params) => {
      data.dialogVisible = params;
      data.pick_flag = true
      submit();
    }

    let getScore = (fractionClassify) => {
      let score = 0;
      for (let i in fractionClassify) {
        score += fractionClassify[i].score
        data.single = fractionClassify[0]
        data.multiterm = fractionClassify[1]
        data.synthesize = fractionClassify[2]
      }
      return score
    }

    let sumbmitResult = (result) => {
      data.mode = 'analysis'
      console.log('result', result.res)
      let {useTime, objectiveScore, fractionClassify} = result.res.data;
      data.useTime = useTime;
      data.score = getScore(fractionClassify);
      data.objectiveScore = objectiveScore;
      const subjects_leads = source_to_subjects(result.res.data);
      console.log('subjects_leads', subjects_leads)
      subjects.value = subjects_leads.subjects
      leads.value = subjects_leads.leads
    }

    let submit = async () => {
      let answerSheet = {
        state: 1,
        id: source.value.id,
        index: active_idx.value,
        useTime: data.useTime,
        answerLogs: answerLogs()
      }
      console.log('answerSheet', answerSheet);
      let result = await submitAnswer(answerSheet, 'testPaperAnalyze');
      await sumbmitResult(result)
    }

    let submitAnswerFun = () => {
      ElMessageBox.confirm(
          '童鞋,请您确认是否需要提交试卷',
          '温馨提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            data.dialogVisible = true
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '已取消',
            })
          })
    }
    let answerLogs = () => {
      let answerLogs = [];
      for (let item of subjects.value) {
        if (item.user_answer) {
          answerLogs.push({id: item.id, answer: item.user_answer.split('')});
        }
      }
      return answerLogs;
    }
    watch(active_idx, () => {
      active_subject.value = subjects.value[active_idx.value]
    })
    watch(source, () => {
      active_subject.value = subjects.value[active_idx.value]
      data.mode = source.value['fraction'] != null ? 'analysis' : 'exam'
      if (source.value['fraction'] != null) {
        console.log('source', source.value);
        let {useTime, objectiveScore, fractionClassify} = source.value;
        data.useTime = useTime;
        data.score = getScore(fractionClassify);
        data.objectiveScore = objectiveScore;
      }
      console.log('source', source.value);
      if (source.value.RegistrationNumber && source.value.documentsCode) {
        data.exam_code = source.value.RegistrationNumber;
        data.card_id = source.value.documentsCode;
      }
    })
    const checked = () => {
      active_subject.value.checked = true
    }
    const next = () => {
      active_idx.value = (active_idx.value + 1) % subjects.value.length
    }
    const pre = () => {
      active_idx.value -= 1
    }
    let closeSubmit = async () => {
      let answerSheet = {
        state: 0,
        id: source.value.id,
        index: active_idx.value,
        useTime: data.useTime,
        answerLogs: answerLogs()
      }
      console.log('answerSheet', answerSheet);
      let result = await submitAnswer(answerSheet, 'testPaperAnalyze').catch(err => {
        ElMessage({type: 'error', message: err.message})
      });
      console.log('result', result);
      window.removeEventListener('beforeunload', () => {
      });
    }
    window.addEventListener('beforeunload', closeSubmit);
    let toIndex = () => {
      if (data.mode == 'exam') {
        ElMessageBox.confirm(
            '童鞋，您的题目还没有交卷哦，确定要退出吗？',
            '温馨提示',
            {
              confirmButtonText: '保存并退出',
              cancelButtonText: '继续做题',
              type: 'warning',
              showClose: false,
              closeOnClickModal: false,
              closeOnPressEscape: false,
              center: true,
            }
        )
            .then(() => {
              closeSubmit();
              router.push({name: 'index'})
            })
      } else {
        router.push({name: 'index'})
      }
    }
    let toQuestionBack = () => {
      if (data.mode == 'exam') {
        ElMessageBox.confirm(
            '童鞋，您的题目还没有交卷哦，确定要退出吗？',
            '温馨提示',
            {
              confirmButtonText: '保存并退出',
              cancelButtonText: '继续做题',
              type: 'warning',
            }
        )
            .then(() => {
              closeSubmit();
              router.push({name: 'MyQuestionBank'})
              let urlParams = goBackHistory.return_history();
              router.push({name: urlParams.name, params: urlParams.params})

            })
      } else {
        router.push({name: 'MyQuestionBank'})
        let urlParams = goBackHistory.return_history();
        router.push({name: urlParams.name, params: urlParams.params})
      }
    }
    let print = (val) => {
      console.log(val)
    }

    let showCalculator = () => {
      data.isCalculator = !data.isCalculator
    }

    let toBack = () => {
      if (data.mode == 'exam') {
        ElMessageBox.confirm(
            '童鞋，您的题目还没有交卷哦，确定要退出吗？',
            '温馨提示',
            {
              confirmButtonText: '保存并退出',
              cancelButtonText: '继续做题',
              type: 'warning',
            }
        )
            .then(() => {
              closeSubmit();
              let urlParams = goBackHistory.return_history();
              router.push({name: urlParams.name, params: urlParams.params})
            })
            .catch(() => {

            })
      } else {
        let urlParams = goBackHistory.return_history();
        router.push({name: urlParams.name, params: urlParams.params})
      }
    }
    //添加或取消收藏
    let addLike = (id) => {
      active_subject.value.is_collect = !active_subject.value.is_collect;
      meCollect(id);
    }
    let imgUrl = ref('')
    let getTaxRateTable = () => {
      taxRateTable().then(res => {
        console.log(res)
        imgUrl.value = res.data[0]
      })
    }
    getTaxRateTable();

    let onFinish = () => {
      console.log('倒计时结束');
      if (!data.dialogVisible) {
        ElMessageBox.confirm(
            '童鞋，本次考试已结束，可点击生成答题报告',
            '模拟考试',
            {
              confirmButtonText: '生成答题报告',
              type: 'warning',
              showCancelButton: false,
              closeOnClickModal: false,
              closeOnPressEscape: false,
              center: true,
              showClose: false
            }
        )
            .then(() => {
              submit();
            })
      }
    }

    let onChange = (currentTime) => {
      data.useTime = data.scopeTime - currentTime;
      // console.log(data.useTime);
    }
    return {
      closeCalcuator,
      dialogEnd,
      onFinish,
      onChange,
      imgUrl,
      anliClose,
      proxy,
      addLike,
      timeDown,
      print,
      showCalculator,
      toIndex,
      toQuestionBack,
      submitAnswerFun,
      sumbmitResult,
      toBack,
      ...toRefs(data),
      active_idx,
      active_subject,
      source,
      subjects,
      checked,
      next,
      pre,
      leads,
    }
  },
  components: {
    Header,
    Question,
    Picker,
    SubmitAnswerSheet,
    timeDown,
    Calculator,
    staticFooter,
    Case,
    CountDown,
    Dialog,
    TableOfRates
  }
}
</script>

<style>
.button-group .el-button {
  width: 48%;
}

.demo-progress .el-progress-circle {
  background-color: white;
  border-radius: 50%;
  border: 0px;
}
</style>

<style scoped>
.box-card {
  position: relative;
}

.question-icon {
  position: absolute;
  top: 40%;
  right: 0%;
  transform: translate(-10%, -10%);
}

.parent {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0px;
  right: 200px;
  user-select: none;
}

.button-group {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.button-group div {
  width: 100%;
}

.hint {
  text-align: center;
  color: rgba(153, 153, 153, 1);
  font-size: 16px;
  font-weight: 400;
}

.question_result_header {
  width: 100%;
  height: 100%;
  background-color: rgba(224, 241, 255, 1);
}

.question_result_header .center-model {
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
}

.question_result_header .center-model .left-img {
  width: 152px;
}

.question_result_header .center-model .left-img img {
  width: inherit;
}

.question_result_header .center-model .right-message {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px 0px;
  margin-left: 46px;
}

.person-message {
  background: rgba(224, 242, 255, 1);
}

.person-message .title {
  padding: 16px 0px;
  text-align: center;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-weight: 400;
}

.person-message .message {
  display: flex;
  padding-bottom: 20px;
}

.person-message .message .left-img {
  width: 86px;
  margin-left: 15px;
}

.person-message .message .left-img img {
  width: inherit;
}

.person-message .message .right-message {
  margin-left: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: rgba(51, 51, 51, 1);
  font-size: 12px;
  font-weight: 400;
  padding: 5px 0px;
}

.exam_quesion_score .table-body {
  display: flex;
  justify-content: center;
  padding: 0 0 20px 0;
}

.exam_quesion_score table tr td {
  text-align: center;
  color: rgba(51, 51, 51, 1);
  font-size: 12px;
  font-weight: 400;
  border: 1px solid rgba(224, 224, 224, 1);
}

.exam_quesion_score {
  background-color: #ffffff;
}

.exam_quesion_score .title {
  color: rgba(153, 153, 153, 1);
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  border-bottom: 1px solid rgba(232, 232, 232, 1);
  margin-bottom: 10px;
}

.submit-button {
  width: 100%;
}

.percentage-value {
  display: block;
  font-size: 15px;
  color: #409eff;
}

.percentage-label {
  display: block;
  margin-top: 5px;
  font-size: 12px;
}

.demo-progress {
  padding: 10px;
  display: flex;
  justify-content: space-around;
}

.demo-progress .item {
  margin-left: 45px;
}

.question_result {
  margin-bottom: 20px;
}

.question_result .card {
  background: rgba(42, 130, 228, 1);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 10px 0;
  text-align: center;
  color: white;
}

.chapterExercise {
  background-color: rgba(247, 247, 247, 1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.link {
  cursor: pointer;
}

.link :hover {
  color: #00a5ff;
}

.main {
  margin: 0 auto;
  width: 75rem;
  margin-bottom: 60px;
}

.breadcrumb {
  height: 40px;
  display: flex;
  align-items: center;
}

.banner {
  width: 100%;
  height: 15rem;
  position: relative;
  overflow: hidden;
}

.banner > img {
  position: absolute;
  top: -100%;

}

.table_result table {
  width: 100%;
  margin: 15px 0;
  border: 1;
}

.table_result {
  margin-top: 20px;
}

.table_result th {
  background-color: #00a5ff;
  color: #ffffff;
}

.table_result,
.table_result th,
.table_result td {
  font-size: 0.85em;
  text-align: center;
  padding: 5px 15px;
  border-collapse: collapse;
}

.table_result th,
.table_result td {
  border: 1px solid #6dcbfe;
  border-width: 1px 0 1px 0;
}

.table_result tr {
  border: 1px solid #6dcbfe;
}
</style>

